<template>
  <el-card class="table-card" :body-style="{ padding: '15px' }">
    <DynamicTable
      ref="tableRef"
      :data="reviewList"
      :columns="columns"
      :loading="loading"
      :pagination="pagination"
      :selection-type="'multiple'"
      row-key="id"
      border
      @selection-change="handleSelectionChange"
      @size-change="handleSizeChange"
      @current-page-change="handlePageChange"
    >
      <template #table-top>
        <div class="batch-operations">
          <span class="selected-count" v-if="selectedRows.length > 0">
            已选择 {{ selectedRows.length }} 项
          </span>
          <el-button
            type="primary"
            :disabled="selectedRows.length === 0"
            @click="handleBatchReview"
          >
            批量审核
          </el-button>
          <el-button
            type="primary"
            :disabled="selectedRows.length === 0"
            @click="handleBatchExport"
          >
            导出选中
          </el-button>
        </div>
      </template>
      <template #status="{ row }">
        <el-tag :type="getStatusTagType(row.status)">{{
          row.statusText
        }}</el-tag>
      </template>
      <template #severity="{ row }">
        <el-tag :type="getSeverityTagType(row.severity)">{{
          row.severity
        }}</el-tag>
      </template>
      <template #action="{ row }">
        <el-button size="small" @click="handleViewDetail(row)">详情</el-button>
        <el-button
          size="small"
          type="primary"
          @click="handleSingleReview(row)"
          v-if="row.status !== 'passed' && row.status !== 'rejected'"
        >
          审核
        </el-button>
        <el-button
          size="small"
          type="success"
          @click="handleViewReport(row)"
          v-if="
            row.status === 'passed' &&
            (row.scanId || row.raw?.scan_info?.scan_id)
          "
        >
          报告
        </el-button>
      </template>
    </DynamicTable>
  </el-card>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from "vue";
import DynamicTable from "@/components/DynamicTable/index.vue";
import type { DynamicTableInstance } from "@/components/DynamicTable/types";
import type {
  TableColumn,
  PaginationConfig,
} from "@/components/DynamicTable/types";

const props = defineProps({
  reviewList: {
    type: Array,
    required: true,
    default: () => [],
  },
  columns: {
    type: Array as () => TableColumn[],
    required: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  pagination: {
    type: Object as () => PaginationConfig,
    required: true,
  },
  selectedRows: {
    type: Array,
    required: true,
    default: () => [],
  },
});

const emit = defineEmits<{
  (e: "selection-change", rows: any[]): void;
  (e: "size-change", size: number): void;
  (e: "current-page-change", page: number): void;
  (e: "view-detail", row: any): void;
  (e: "single-review", row: any): void;
  (e: "view-report", row: any): void;
  (e: "batch-review"): void;
  (e: "batch-export"): void;
}>();

const tableRef = ref<DynamicTableInstance>();

// 获取状态标签类型
const getStatusTagType = (
  status: string
): "success" | "warning" | "info" | "danger" => {
  const typeMap: Record<string, "success" | "warning" | "info" | "danger"> = {
    pending: "danger",
    reviewing: "warning",
    passed: "success",
    rejected: "info",
  };
  return typeMap[status] || "info";
};

// 获取严重程度标签类型
const getSeverityTagType = (
  severity: string
): "success" | "warning" | "info" | "danger" => {
  const typeMap: Record<string, "success" | "warning" | "info" | "danger"> = {
    严重: "danger",
    高危: "warning",
    中危: "info",
    低危: "success",
  };
  return typeMap[severity] || "info";
};

// 事件处理
const handleSelectionChange = (rows: any[]) => {
  emit("selection-change", rows);
};

const handleSizeChange = (size: number) => {
  emit("size-change", size);
};

const handlePageChange = (page: number) => {
  emit("current-page-change", page);
};

const handleViewDetail = (row: any) => {
  emit("view-detail", row);
};

const handleSingleReview = (row: any) => {
  emit("single-review", row);
};

const handleViewReport = (row: any) => {
  emit("view-report", row);
};

const handleBatchReview = () => {
  emit("batch-review");
};

const handleBatchExport = () => {
  emit("batch-export");
};
</script>

<style scoped lang="scss">
.table-card {
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}

.batch-operations {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;

  .selected-count {
    color: #666;
    font-size: 14px;
    margin-right: 10px;
  }
}
</style>
